<template>
  <div class="container px-4">
    <Breadcrumbs title="Store" details="Product Detail" toPath="/store" />
    <section class="sm:flex mb-20">
      <div class="sm:w-2/5 flex-shrink-0 sm:mr-14 mb-2 sm:mb-0">
        <!-- <div
          class="el-carousel el-carousel--horizontal carousel"
          modelvalue="0"
        >
          <div class="el-carousel__container">
            <button
              type="button"
              class="el-carousel__arrow el-carousel__arrow--left"
              style="display: none"
            >
              <i class="el-icon-arrow-left"></i></button
            ><button
              type="button"
              class="el-carousel__arrow el-carousel__arrow--right"
              style="display: none"
            >
              <i class="el-icon-arrow-right"></i>
            </button>
            <div
              class="el-carousel__item is-active is-animating"
              style="transform: translateX(0px) scale(1)"
            >
              <div
                class="w-full pb-[100%] bg-center bg-contain bg-no-repeat"
                :style="`background-image: url(${product.image});`"
              ></div>
            </div>
            <div
              class="el-carousel__item is-animating"
              style="transform: translateX(427px) scale(1)"
            >
              <div
                class="w-full pb-[100%] bg-center bg-contain bg-no-repeat"
                :style="`background-image: url(${product.image});`"
              ></div>
            </div>
          </div>
        </div> -->
        <el-carousel
          indicator-position="outside"
          ref="carousel"
          indicatorPosition="none"
        >
          <el-carousel-item v-for="(item, index) in product.image" :key="index">
            <img :src="item" alt="" />
          </el-carousel-item>
        </el-carousel>
        <div class="flex space-x-2.5 overflow-x-auto">
          <button
            v-for="(item, index) in product.image"
            @click="changImgs(index)"
            :key="index"
            class="my-4 rounded w-[100px] h-[100px] bg-no-repeat bg-contain bg-center border hover:opacity-75 flex-shrink-0 border-gray"
            :style="`background-image: url('${item}');`"
          ></button>
        </div>
      </div>
      <div class="flex-1">
        <div class="space-y-5 mb-5 sm:mb-10">
          <h5>Converse</h5>
          <h2 class="text-2xl sm:text-[36px] leading-snug font-semibold">
            {{ product.goods_name }}
          </h2>
          <div class="text-[40px] leading-tight flex items-center space-x-5">
            <div class="">
              <span>Ł</span><span>{{ product.pirce }}</span>
            </div>
            <div class=""><!----><!----></div>
          </div>
        </div>
        <!-- <div
          id="headlessui-radiogroup-160"
          role="radiogroup"
          class="flex mb-7"
          aria-labelledby="headlessui-label-161"
        >
          <label
            id="headlessui-label-161"
            class="text-sm w-12 pt-3 flex-shrink-0"
            role="none"
            >规格</label
          >
          <div class="text-sm flex flex-wrap flex-shrink-1 gap-y-2" role="none">
            <div
              class="group cursor-pointer relative text-center focus:outline-none flex items-center border rounded h-10 leading-10 text-sm sm:flex-0 text-black-50 border-black-50 whitespace-nowrap px-[2px] ml-2 border-[#ff7c00] border-2 px-px text-[#ff7c00] hover:text-[#ff7c00]"
              id="headlessui-radiogroup-option-162"
              role="radio"
              aria-checked="true"
              tabindex="0"
            >
              <div
                id="tooltip-light"
                role="tooltip"
                class="inline-block absolute invisible z-10 py-2 px-3 top-[-100%] left-[50%] -translate-x-1/2 text-xs font-medium text-white bg-black rounded-lg shadow-sm opacity-0 ease-in duration-100 group-hover:delay-500 tooltip group-hover:visible group-hover:opacity-100 text-xs"
              >
                <span>43</span>
              </div>
              <p class="px-3">43</p>
            </div>
            <div
              class="group cursor-pointer relative text-center focus:outline-none flex items-center border rounded h-10 leading-10 text-sm sm:flex-0 text-black-50 border-black-50 whitespace-nowrap px-[2px] ml-2 hover:text-[#ff7c00]"
              id="headlessui-radiogroup-option-163"
              role="radio"
              aria-checked="false"
              tabindex="-1"
            >
              <div
                id="tooltip-light"
                role="tooltip"
                class="inline-block absolute invisible z-10 py-2 px-3 top-[-100%] left-[50%] -translate-x-1/2 text-xs font-medium text-white bg-black rounded-lg shadow-sm opacity-0 ease-in duration-100 group-hover:delay-500 tooltip group-hover:visible group-hover:opacity-100 text-xs"
              >
                <span>44</span>
              </div>
              <p class="px-3">44</p>
            </div>
          </div>
        </div> -->
        <div>
          <div class="flex text-sm space-x-5 mb-7 sm:mb-10">
            <p class="mt-2.5">number</p>
            <div
              class="rounded border flex border-black-70 overflow-hidden items-center h-10 text-black-70"
            >
              <button
                class="w-10 h-10 text-center hover:bg-[#eee]"
                @click="changeNum(-1)"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  class="w-5 m-auto"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M18 12H6"
                  ></path>
                </svg>
              </button>
              <div
                class="border-l border-r border-black-70 px-5 h-full leading-10"
              >
                {{ num }}
              </div>
              <button
                class="w-10 h-10 text-center hover:bg-[#eee]"
                @click="changeNum(1)"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  class="w-5 m-auto"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 6v6m0 0v6m0-6h6m-6 0H6"
                  ></path>
                </svg>
              </button>
            </div>
          </div>
          <button
            @click="buy"
            type="button"
            class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary w-full sm:w-[300px] py-3"
          >
            <div>Buy now</div>
            <!---->
          </button>
        </div>
        <!----><!---->
        <div
          class="grid grid-cols-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 lg:flex lg:gap-6 text-sm mt-10"
        >
          <div class="flex items-center">
            <img class="mr-2" src="../../assets/img/shield.svg" alt="" />
            Strict control of merchants
          </div>
          <div class="flex items-center">
            <img class="mr-2" src="../../assets/img/shield.svg" alt="" />
            Regular inspection
          </div>
          <div class="flex items-center">
            <img class="mr-2" src="../../assets/img/shield.svg" alt="" />
            Authenticity guarantee
          </div>
          <div class="flex items-center">
            <img class="mr-2" src="../../assets/img/shield.svg" alt="" />
            Free shipping nationwide
          </div>
          <div class="flex items-center">
            <img class="mr-2" src="../../assets/img/shield.svg" alt="" />
            Professional packaging
          </div>
        </div>
      </div>
    </section>
    <section class="mb-32">
      <div role="tablist" aria-orientation="horizontal" class="text-2xl">
        <button
          @click="showDetails = true"
          id="headlessui-tabs-tab-164"
          role="tab"
          type="button"
          aria-selected="true"
          tabindex="0"
          :class="[
            'border-b-2 py-3 px-4 lg:px-32 font-semibold',
            { 'border-transparent': !showDetails },
            { 'border-yellow': showDetails },
          ]"
          aria-controls="headlessui-tabs-panel-166"
        >
        Commodity details
        </button>
        <button
          @click="showDetails = false"
          id="headlessui-tabs-tab-165"
          role="tab"
          type="button"
          aria-selected="false"
          tabindex="-1"
          :class="[
            'border-b-2 py-3 px-4 lg:px-32 font-semibold',
            { 'border-transparent': showDetails },
            { 'border-yellow': !showDetails },
          ]"
        >
        Buying guide
        </button>
      </div>
      <!-- 商品详情 -->
      <div class="text-sm min-h-full pt-8" v-show="showDetails">
        <div v-html="product.gooddetails"></div>
      </div>
      <!-- 购买指南 -->
      <div class="text-sm min-h-full pt-8" v-show="!showDetails">
        <!---->
        <div
          id="headlessui-tabs-panel-117"
          role="tabpanel"
          aria-labelledby="headlessui-tabs-tab-115"
          tabindex="0"
        >
          <article>
            <h4>Reservation and Payment</h4>
            <br />
            <h5>About Reservation:</h5>
            <ol>
              <li>The deposit for reserved goods is 15% of the full payment, and the balance must be paid after the goods are released and arrived.</li>
              <li>
                For pre-sale goods, the order will take effect after the deposit payment is successful, and no deposit refund will be accepted.
              </li>
              <li>The release date is for reference only. Please refer to the actual arrival time.</li>
              <li>For some special goods, we need to collect the full payment of the goods as a deposit.</li>
            </ol>
            <h5>About Payment:</h5>
            <ol>
              <li>
                After the goods are officially released and arrived, we will notify you to make up the payment based on the contact information you reserved in the reservation order.
              </li>
              <li>
                Please make the payment within 14 days after receiving the payment notice. If the payment is not made within the time limit, it will be deemed as an automatic waiver of this order, and no deposit refund application will be accepted for any reason. Thank you for your understanding.
              </li>
            </ol>
            <h5>About Cross-border:</h5>
            <ol>
              <li>
                In order to shorten the delivery time, some goods may be delivered through cross-border direct mail after they are shipped. After the goods enter the Hong Kong warehouse, we will start the payment and provide Hong Kong direct mail service as soon as possible.
              </li>
              <li>
                If you agree to purchase through cross-border, according to national regulations, the individual purchase of cross-border goods shall not exceed 5000RMB per order, and the annual individual cross-border consumption shall not exceed 26000RMB. Please pay attention to the individual cross-border quota before placing an order. At the same time, you need to provide the name and ID number consistent with the account name.
              </li>
              <li>
                If you choose the member purchase domestic warehouse delivery service, you do not need to provide the buyer's information, but you need to wait for the goods to arrive at the domestic warehouse, and the delivery can be completed within 45 days after the payment is made.
              </li>
            </ol>
          </article>

        </div>
      </div>
    </section>
    <BuyModal
      :showBuyModal="showBuyModal"
      @closeModal="closeModal"
      :order="order"
      :goods_id="this.goods_id"
      :goods_num="this.num"
    ></BuyModal>
  </div>
</template>
<script>
import BuyModal from "./components/buyModal.vue";
import Breadcrumbs from "@/components/Breadcrumbs/index.vue";
export default {
  components: {
    BuyModal,
    Breadcrumbs,
  },
  // created() {
  //   this.getProduct();
  // },
  data() {
    return {
      product: {},
      num: 1,
      showDetails: true,
      showBuyModal: false,
      order: {},
      goods_id: "",
    };
  },
  methods: {
    getProduct() {
      this.$api
        .getShop({
          sid: this.$route.query.id,
        })
        .then((res) => {
          this.product = res.data.data;
        });
    },
    changImgs(idx) {
      this.$refs.carousel.setActiveItem(idx);
    },
    changeNum(n) {
      if (
        (this.num <= 1 && n == -1) ||
        (this.num >= this.product.stock && n == 1)
      ) {
        return;
      }
      this.num += n;
    },
    buy() {
      this.showBuyModal = true;
      this.goods_id = this.$route.query.id;
      this.$api
        .previewOrder({
          goods_id: this.goods_id,
          goods_num: this.num,
        })
        .then((res) => {
          this.order = res.data.data;
        });
    },
    closeModal(val) {
      this.showBuyModal = false;
    },
  },
  watch: {
    $route: {
      handler: function (to, from) {
        // 在这里执行您需要的操作，例如重新获取数据
        this.getProduct();
      },
      immediate: true, // 设置为 true 以便在组件初始化时立即执行
    },
  },
};
</script>
<style lang="" scoped></style>
